<template>
  <div class="frist">
    <nav class="navbar">
      <div class="shouye" style="background-color: green;list-style: none;margin-left: 5em;">
        <router-link to="/" class="navbar-link">首页</router-link>
      </div>


      <div class="navbar-right">
        <a href="#" class="photo" @mouseover="showHover = true" @mouseout="checkHoverOut">
          <img src="https://codelover.club/icons/user/icon8.png" alt="用户头像" />
        </a>

        <div class="hover-box" v-show="showHover" @mouseover.stop="stopHoverOut" @mouseout="checkHoverOut">
          <div class="information">
            <img src="https://codelover.club/icons/user/icon8.png" alt="学生" />
            <div class="profile-info">
              <p class="id-number">22000901</p>
              <p class="center-text">个人中心</p>
            </div>
          </div>
          <div class="menu-items " style="width: 330px;">
            <p>我的课程</p>
            <p>学习广场</p>
            <p>管理中心</p>
          </div>

          <div class="empty-data" style="width: 330px;height: 200px; background-color: #f1f1f1;">
            <p>暂无数据</p>
          </div>
          <div class="landout" style="width: 330px; color:lightslategray ;font-style:normal;">
            <router-link to="/LoginForm" class="logout-link" style="margin-right: 30px; color: #cd4242">
              退出登录
            </router-link>
            <router-link to="/RegistrationForm" class="logout-rank" style="margin-right: 30px; color: #348e1b">
              快速注册
            </router-link>
          </div>
        </div>

      </div>
    </nav>


  </div>


</template>



<script setup>
import { ref } from 'vue';
// 使用 ref 创建响应式数据

const showHover = ref(false)


function stopHoverOut() {
  showHover.value = true
}

function checkHoverOut(event) {
  if (!event.relatedTarget?.matches('.photo, .hover-box *, .hover-box')) {
    showHover.value = false
  }
}


</script>


<style scoped>
.first {
  position: relative;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6vh;
  background-color: #ffffff;
  color: #ffffff;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  gap: 8em;
  align-items: center;
  padding: 10px;
  box-shadow: 0 11px 15px rgba(0, 0, 0, 0.1);
}

.shouye {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  justify-content: space-between;
  /* margin-left: 100em; */
  padding: 0 4px;
}


.navbar-link {
  font-size: 1rem;
  color: white;
  padding: 10px;
}

.navbar-link-item {
  position: relative;
}

.photo {
  position: relative;
  /* 使得hover-box可以相对于这个元素定位 */
  display: inline-block;
  /* 确保可以正确触发mouseover和mouseout事件 */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* 假设是圆形头像 */
  overflow: hidden;
}



.navbar-right {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  margin-right: 5em;
  justify-content: space-between;
  /* position: relative; */
}

.phot-container {
  position: relative;
  margin-right: 25vw;
}

.photo img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.hover-box {
  border: 1px solid #e7e7e7;
  display: block;
  position: absolute;
  bottom: -670%;
  left: 85%;
  transform: translateX(-60%);
  width: 6vw;
  height: 20vh;
  padding: 160px;
  background-color: #ffffff;
  color: #000000;
  border-radius: 4px;
  transition: opacity 10s ease;
  pointer-events: auto;
  opacity: 1;
  max-width: 100px;
}
.photo:hover+.hover-box {
  opacity: 100;
  display: block;
}

.information {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: flex-start;
  transform: translateX(-150px);
  top: 23px;

}

.information img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 28px;
  margin-left: 15px;
}

.profile-info {
  margin: 15px;
  align-items: center;
}

.profile-info p {
  margin: 0;
  display: inline-block;
  text-align: center;
  font-weight: bold;
}

.profile-info .id-number {
  font-size: 26px;
}

.profile-info .center-text {
  font-size: 16px;
  margin-left: 5px;
}



.menu-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: -35px;
  margin-left: -130px;
}

.menu-items p {
  margin-top: 15px;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  margin-right: 15px;
}

.menu-items p:last-child {
  margin-right: 0;
}

.menu-items p:nth-child(1),
.menu-items p:nth-child(2),
.menu-items p:nth-child(3) {
  color: #ffffff;
  font-style: normal;
}

.empty-data {
  position: relative;
  margin-left: -130px;
  border-radius: 10px;
  padding-top: 30px;
  margin-top: 5px;
}

.empty-data p {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: black;
  padding: 10px;
  margin: 0;
  width: 100%;
  text-align: center;
}

.landout {
  font-size: 16px;
  margin-left: -50px;
color: #000000;
}
</style>
